<template>
	<app-dialog ref="dialog" width="100%" @confirm="save" bg="" :isFooter="false" :isClose="false">
		<view class="content">
			<view class="head">
				<view class="add_wrap">
					<view class="description">累计签到赢奖励(1/7)</view>
					<view class="list">
						<view v-for="(item, index) in weeklist" :key="index">
							<view class="item" v-if="item.status == 0">
								<view class="num">{{item.choosedate }}</view>
								<view class="day">{{ item.choosenames }}</view>
							</view>
							<view class="item-active" v-else>
								<view class="num">{{ item.choosedate }}</view>
								<image class="img" :src="$imgUrl('/my_sign_select.png')" mode="scaleToFill" />
							</view>
						</view>
					</view>
					<view class="sign" @tap="qdsumbit()" v-if="issign == 0 ">签到</view>
					<view class="sign" v-else>已签</view>
				</view>
			</view>
			<view class="text">每日签到获得30积分</view>
			<image class="close" @click="$refs.dialog.close()" :src="$imgUrl('/dialog_close.png')" mode="scaleToFill" />
			<view class="footer">
				<view>月累计签到7天额外获得3张魔法相册。</view>
				<view>月累计签到15天额外获得100M存储空间。</view>
				<view>月累计签到30天额外获得500M存储空间。</view>
			</view>
			<!-- 日打卡 -->
			<view class="date">
				<zzx-calendar @selected-change="datechange" :dotList="dotList" :dotStyle="{ background: '#000' }"
					showBack v-if="isGetData" />
			</view>
		</view>
		<u-modal :show="cardshow" :title="cardtitle" :content="cardcontent" closeOnClickOverlay showCancelButton
			width="500rpx" @confirm="confirm" @cancel="() => (cardshow = false)"
			@close="() => (cardshow = false)"></u-modal>
	</app-dialog>
</template>

<script>
	import zzxCalendar from "@/components/zzx-calendar/zzx-calendar.vue";
	export default {
		components: {
			zzxCalendar,
		},
		data() {
			return {
				isGetData: false,
				text: "",
				dotList: "",
				datatime: "",
				stepList: [],
				issign: 0,
				weeklist: [],
				cardshow: false,
				cardtitle: "是否补签",
				cardcontent: "(如补签成功，计入累计奖励)",
				fullDate: "",
				daysOfWeek: [],
				dateToday: '',
				bqNum: 0,
				sfbf: false
			};
		},

		mounted() {

		},

		methods: {

			//补签或者签到
			close() {
				this.cardshow = false;
			},
			confirm() {
				this.bqsumbit(1)
			},

			// 封装补签方法
			bqsumbit(e) {
				if (e === 1) {
					if (this.bqNum <= 0) {
						uni.showToast({
							title: '当月补签次数不足!',
							icon: 'none'
						});
						this.sfbf = false
						this.cardshow = false;
					} else {
						this.sfbf = true
					}
				} else {
					this.sfbf = true
				}
				if (this.sfbf) {
					console.log(e)
					this.videoAd = wx.createRewardedVideoAd({
						adUnitId: "adunit-dbb0f41bc662c0e7" // 申请激励广告单元ID
					});
					this.videoAd.onError(err => {
						uni.showToast({
							title: '领取失败!',
							icon: 'none'
						});
						// console.log("err1", err)
					})
					this.videoAd.load()
						.then(() => this.videoAd.show())
						.catch(err => {
							uni.showToast({
								title: '领取失败!',
								icon: 'none'
							});
							// console.log("err2", err)
							this.videoAd.load()
								.then(() => this.videoAd.show())
						})
					this.videoAd.onClose(res => {
						console.log("res1", res);
						this.videoAd.offClose();
						// 用户点击了【关闭广告】按钮
						if (res && res.isEnded || res === undefined) {
							// 广告正常播放结束，业务逻辑
							console.log("广告正常播放结束")
							if (res.isEnded) {
								this.$http
									.post("/app/qd/qd", {
										type: e,
										bqdq: this.fullDate,
									})
									.then((res) => {
										uni.showToast({
											title: e == 0 ? '签到成功' : '补签成功',
											icon: "none",
										});
										if(e === 1){
											this.bqNum = this.bqNum - 1
										}
										this.cardshow = false;
										this.calendar();
										this.isSignIn();
										this.isweekSignIn();
									}).catch(() => {
										this.cardshow = false;
									})
							}
						} else {
							uni.showToast({
								title: '领取失败!',
								icon: 'none'
							});
							// 播放中途退出
							// console.log("播放中途退出")
						}
					})
				}


			},
			//日历
			calendar() {
				this.$http.post("/app/qd/yqdjl").then((res) => {
					this.isGetData = true;
					this.dotList = res.list;
					this.dotList.forEach((i) => {
						i.date = i.sign;
					});

				});
			},
			//当日是否签到
			isSignIn() {
				this.$http.post("/app/qd/sfqd").then((res) => {
					this.issign = res.sign;
					// console.log(res.sign)
				});
			},
			// 周签到
			isweekSignIn() {
				this.$http.post("/app/qd/zqdjl").then((res) => {
					// 获取当前日期和星期
					let date = new Date();
					let weekdays = ["第七天", "第一天", "第二天", "第三天", "第四天", "第五天", "第六天"];
					let dayOfWeekIndex = date.getDay();
					// 获取当天的日期和星期
					let dayOfMonth = date.getDate();
					let month = date.getMonth() + 1; // 月份从0开始，需要加1
					let year = date.getFullYear();
					this.dateToday = year + '-' + month + '-' + dayOfMonth
					let nextDays = [];
					for (let i = 0; i < 7; i++) {
						let nextDate = new Date(date.getTime() + i * 24 * 60 * 60 * 1000); // 加上一天的时间差
						nextDays.push({
							date: nextDate.getDate(),
							dayOfWeek: weekdays[nextDate.getDay()]
						});
					}
					for (let i = 0; i < 7; i++) {
						this.daysOfWeek.push({
							num: nextDays[i].date,
							names: nextDays[i].dayOfWeek
						})

					}
					this.daysOfWeek.map((v, i) => {
						if (res.list[i]) {
							res.list[i].choosedate = v.num
							res.list[i].choosenames = v.names
						}
					})
					res.list.forEach((item) => {
						if (item.choosedate == dayOfMonth) {
							item.choosenames = '今天'
						}
						return
					});
					this.weeklist = res.list
				});
			},
			// 当日签到
			qdsumbit() {
				this.bqsumbit(0)

			},

			//补签日历
			datechange(e) {
				this.$http.post('/app/qd/getRqSfqd', {
					bqdq: e.fullDate
				}).then(res => {
					if (res.sign === 1) {
						uni.showToast({
							title: "已经签到!",
							icon: "none",
						});
					} else {
						this.fullDate = e.fullDate;
						if (new Date(e.fullDate) < new Date(this.dateToday)) {
							this.cardshow = true;
						} else if (new Date(this.dateToday).getDate() === new Date(e.fullDate).getDate() && this
							.issign == 0) {
							uni.showToast({
								title: "请点击上方签到",
								icon: "none",
							});
						} else {
							uni.showToast({
								title: "还没到签到日期噢",
								icon: "none",
							});
						}
					}
				})
			},
			// 弹窗
			async open() {
				this.reset();
				this.calendar();
				this.isSignIn();
				this.isweekSignIn();
				this.$http.post('/app/getHy', {}).then(ress => {
					this.bqNum = ress.data.bqNum
				})
				// 打开弹框
				await this.$refs.dialog.open();
			},
			reset() {},

			/**
			 * 保存
			 */
			async save() {
				try {
					///	this.$refs.dialog.close();
					//	this.hideLoading();
				} catch (e) {
					this.errorLoading(e);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		position: relative;
		height: 90vh;

		.add_wrap {
			height: 455rpx;
		}
	}

	.footer {
		margin-top: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		view {
			margin: 14rpx 0;
			@include center();
			background-color: #054936;
			border: 2rpx solid #10f2b4;
			height: 70rpx;
			width: 640rpx;
			color: #fff;
		}
	}

	.close {
		position: absolute;
		left: 3rpx;
		top: 30rpx;
		height: 40rpx;
		width: 40rpx;
	}

	.text {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		font-size: 20rpx;
		color: #999;
	}

	.head {
		margin-top: 50rpx;
		background: url($imgUrl + "/my_sign.png") no-repeat;

		position: relative;
		//background-image: url('@/static/image/my_sign_bg.png');
		background-size: 100% 100%;
		width: 100%;
		height: 460rpx;
		display: flex;
		flex-direction: column;

		// align-items: center;
		.description {
			margin-top: 29%;
			margin-left: 40rpx;
			color: #fff;
			font-weight: bold;
			font-size: 22rpx;
			font-style: italic;
		}

		.sign {
			// background-image: url('../../static/image/my_sign_btn_bg.png');
			background: url($imgUrl + "/my_sign_btn_bg.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			bottom: -20rpx;
			left: 200rpx;
			width: 280rpx;
			height: 80rpx;
			@include center();
			color: #000;
			font-style: italic;
			font-size: 38rpx;
			font-weight: bold;
		}

		.list {
			width: 640rpx;
			margin-top: 7%;
			margin-left: 40rpx;
			display: flex;
			justify-content: space-around;

			.item {
				width: 70rpx;
				height: 100rpx;
				// background-image: url('../../static/image/my_sign_day.png');
				background: url($imgUrl + "/my_sign_day.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.num {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #0ffdbb;
					font-weight: bold;
				}

				.day {
					font-size: 18rpx;
					margin-top: 10rpx;
					color: #999;
				}
			}

			.item-active {
				width: 70rpx;
				height: 100rpx;
				// background-image: url('../../static/image/my_sign_day_active.png');
				background: url($imgUrl + "/my_sign_day_active.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.num {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #fff;
					font-weight: bold;
				}

				.img {
					height: 20rpx;
					width: 20rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.title {
		@include center();
		margin-top: 140rpx;
		color: #000;
		font-weight: bold;
		font-size: 40rpx;
		margin-left: 30rpx;
	}

	.input {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		width: 320rpx;
		padding: 14rpx 10rpx;
		margin-left: 40rpx;
		@include center();
	}

	.btn {
		margin-top: 60rpx;
		margin-left: 40rpx;
		@include btn($width: 340rpx);
	}

	.date {
		background-color: #fff;
		width: 91%;
		margin: 0 auto;
		border-radius: 10rpx;
	}
</style>